*{
  margin:0;
  padding:0;
}

$header-height:128px;
$navbar-height:44px;
$navbar-font-size:15px;
$navbar-li-padding:12px;
$scrollImg-height:352px;
$childbar-height:58px;
@mixin flex(){
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

body{
  background: url('../images/a_bg.png') repeat-x;
}

.container{
  @include flex();
  flex-flow:row wrap;
  min-width:1000px;
  justify-content: center;
}

.header{
  @include flex();
  height:$header-height;
  flex-flow:row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  position:relative;
  width:1000px;
  &-logo{
    order:0;
    align-self:center;
    position:relative;
  }

  &-img{
    order:1;
    background: url('../images/a_bg_1.png') no-repeat;
    position:absolute;
    width:336px;
    height:198px;
    z-index:0;
    top:0;
    right:130px;
  }

  &-search{
    display: flex;
    align-self:center;
    position:relative;
    order:2;
    left:450px;
  }
}

.navbar{
  @include flex();
  height:44px;
  width:100%;
  background-color: #ffffff;
  opacity: 1;
  flex-flow:row wrap;
  justify-content: center;
  align-items: flex-start;
  z-index:1000;

  &-baritem{
    order:0;
    position:relative;
  }

  ul{
    @include flex();
    flex-flow:row wrap;
    height:100%;
    list-style: none;
    color:black;
    font-size:$navbar-font-size;
    line-height:$navbar-height;
  }

  li{
    padding: 0 $navbar-li-padding 0 $navbar-li-padding;
    border-left: #e5e5e5 solid 1px;
    cursor: pointer;
  }

  li:hover{
    color:red;
  }

  &-menu{
    background-color: #036eb8;
    width:1000px;
    height:33px;
    position:relative;

    ul{
      font-size:12px;
      line-height:33px;
      color:#addffb;
      background-color: #036eb8;
    }

    li{
      border:0;
    }

    li:hover{
      color:white;
    }
  }

  &-menu-list{
    display: none;
  }
}

.scrollImg{
  position: relative;
  margin-top:3px;
  width:1000px;
  height:$scrollImg-height;
  overflow: hidden;

  &-item-1{
    width:1000px;
    height:$scrollImg-height;
    background: url('../images/1.jpg') no-repeat;
    -webkit-background-size: 1000px $scrollImg-height;
    background-size: 1000px $scrollImg-height;
  }

  &-item-2{
    width:1000px;
    height:$scrollImg-height;
    background: url('../images/2.jpg') no-repeat;
    -webkit-background-size: 1000px $scrollImg-height;
    background-size: 1000px $scrollImg-height;
  }

  &-item-3{
    width:1000px;
    height:$scrollImg-height;
    background: url('../images/3.png') no-repeat;
    -webkit-background-size: 1000px $scrollImg-height;
    background-size: 1000px $scrollImg-height;
  }

  &-controller{
    position:absolute;
    bottom:3px;
    right:3px;
    ul{
      @include flex();
      list-style:none;
      flex-flow: row wrap;
      height:12px;
      font-size:10px;
      line-height: 10px;
    }

    li{
      list-style:none;
      background-color: white;
      padding:2px;
      margin:0 2px;
    }
  }
}

.childbar{
  @include flex();
  background-color: #036eb8;
  height:$childbar-height;
  justify-content: center;
  width:1000px;
  ul{
    @include flex();
    justify-content: center;
    list-style: none;
    width:880px;
    height:100%;
    flex-flow:row wrap;
    padding-top:6px;

  }

  li{
    font-size:$navbar-font-size;
    font-weight:900;
    width:110px;
    text-align:center;
    color:#addffb;
    border-top:#ebebeb solid 12px;
    line-height:40px;
    cursor:pointer;
  }

  li:hover{
    font-size:$navbar-font-size;
    font-weight:900;
    width:110px;
    text-align:center;
    color:#addffb;
    border-top:red solid 12px;
    line-height:40px;
  }
}


.content{
  @include flex();
  justify-content: flex-start;
  flex-flow: row wrap;
  align-items: flex-start;
  width:1000px;
  margin-top:10px;

  &-item-1{
    height:280px;
    width:384px;
    position: relative;
    margin-left:5px;
    order:0;
  }

  &-item-2{
    height:280px;
    width:384px;
    position: relative;
    margin-left:10px;
    order:1;
  }

  &-item-3{
    order:2;
  }

  &-item-4{

  }

  &-item-5{

  }

  &-item-6{

  }
}

.content-item{
  &-title{
    font-size:16px;
    border-bottom: #036eb8 solid 2px;
    height:50px;
    line-height: 50px;
    width:384px;
    font-weight: 900;
    color:#036eb8;
  }

  &-script{
    position: absolute;
    right:2px;
    top:15px;
    width:19px;
    height:19px;
    background: url("../images/a_script.png") no-repeat 0px -26px;
  }
}

.content-item-content{
  padding:10px 8px;
  &-img{
    width:125px;
    height:95px;
    display: inline-block;
  }
  &-info{
    width:230px;
    height:84px;
    display: inline-block;
  }
}

.none{
  display: none;
}

.imgHover{
  background-color: #e13e90 !important;
}

.select{
  color:red;
}